﻿
<style>
    .photoView {
        padding: 9px 14px;
        margin-bottom: 14px;
        background-color: #f7f7f9;
        border: 1px solid #e1e1e8;
        /*border-radius: 4px;*/
        text-align: center;
    }
</style>

<div class="panel panel-default padding-empty">
    <div class="panel-body padding-empty">
        <ol class="breadcrumb margin-empty">
            <li class="breadcrumb-color"><i class="fa fa-home"></i>&nbsp;主页</li>
            <li><a href="#/photo/planList" class="breadcrumb-link">照片采集</a></li>
            <li class="active">{{planName}} - 照片采集</li>
        </ol>
    </div>
</div>

<div class="panel panel-default">
    <!--<div class="panel-heading">
        <h3 class="modal-title">
            <i class="fa fa-photo"></i>
            {{planName}} - 照片采集
            &nbsp;
            <button class="btn btn-turquoise btn-xs" onclick="javascript: history.go(-1);" title="返回上一页" style="margin-bottom: 0;">
                <i class="fa fa-chevron-left"></i>
            </button>
        </h3>
    </div>-->

    <div class="panel-body">
        <form class="form-inline">
            <div class="form-group">
                <label class="control-label">场次：</label>
                <select ng-model="curScene" ng-options="item.examSceneName for item in sceneList" class="form-control selectMaxWidth"></select>
            </div>

            <div class="form-group">
                <label class="control-label">考场：</label>
                <select ng-model="curRoom" ng-options="item.examRoomName for item in roomList" class="form-control selectMaxWidth"></select>
            </div>

            <div class="form-group">
                <label class="control-label">状态：</label>
                <select ng-model="curStatus" ng-options="item.statusName for item in statusList" class="form-control selectMaxWidth"></select>
            </div>

            <div class="form-group">
                <input ng-model="curParams" class="form-control" maxlength="30" placeholder="准考证号或学生姓名" />
            </div>

            &nbsp;
            &nbsp;

            <button class="btn btn-turquoise" ng-click="query();" style="margin-bottom: 0;">
                <i class="fa fa-search"></i>
                搜索
            </button>
        </form>

        <br />
        <div class="row">
            <div class="col-sm-9">
                <table style="margin-bottom: 0;" class="table responsive table-bordered table-hover text-center">
                    <thead>
                        <tr class="active">
                            <th>#</th>
                            <th>考生姓名</th>
                            <th>考生性别</th>
                            <th>准考证号</th>
                            <th>照片状态</th>
                            <th>场次</th>
                            <th>考场</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="item in list" ng-click="viewPhoto(item);" ng-class="{success:item.active}" style="cursor: pointer;">
                            <!--序号-->
                            <td class="text-center" ng-bind="$index+1"></td>
                            <!--考生姓名-->
                            <td ng-bind="item.ExamineeName"></td>
                            <!--考生性别-->
                            <td ng-switch on="item.Sex">
                                <span ng-switch-when="1">男</span>
                                <span ng-switch-when="2">女</span>
                            </td>
                            <!--准考证号-->
                            <td ng-bind="item.ExamCardNo"></td>
                            <!--照片状态-->
                            <td>
                                <span ng-if="item.Photo">已拍照</span>
                                <span ng-if="!item.Photo">未拍照</span>
                            </td>
                            <!--场次-->
                            <td ng-bind="item.ExamSceneName"></td>
                            <!--考场-->
                            <td title="{{item.ExamRoomName}}" ng-bind="item.ExamRoomName | formatLongStr"></td>
                        </tr>
                    </tbody>
                </table>

                <h3 class="text-center" ng-show="list.length <= 0">
                    <img src="//openexamcdn.open.com.cn/openexam/static/App/images/nodata.jpg" alt="" />
                    <!--<small>对不起，没有相关数据！</small>-->
                </h3>
            </div>
            <div class="col-sm-3">
                <div class="photoView">
                    <img src="#" alt="学生照片" class="photoImg" />
                    <hr />
                    <button class="btn btn-default btn-xs" ng-click="camera();">
                        <i class="fa fa-camera-retro" style="font-size: 3em;"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="//openexamcdn.open.com.cn/openexam/static/App/vendor/webcam/jquery.webcam.min.js"></script>

<script>
    $(function () {
        floatPhoto('.photoView');
    });

    function floatPhoto(obj) {
        var objTop = $(obj).offset().top;

        $(window).scroll(function () {
            var top = $(window).scrollTop();
            if (top >= objTop)
                $(obj).css({ position: 'fixed', top: 0 });
            else
                $(obj).css({ position: 'relative' });
        });
    }
</script>